<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="nav">
        <a href="#/">首页</a>
        <a href="#/list">商品列表</a>
        <a href="#/cart">购物车</a>
    </div>
    <div class="router_view"></div>
</body>
<script>
    // 选择视图要渲染的容器
    const routerView = document.querySelector(".router_view");

    // 准备页面视图结构
    const templateA = `<em>首页</em>`;
    const templateB = `<b>商品列表</b>`;
    const templateC = `<mark>购物车</mark>`;

    // 渲染初始视图
    render();
    
    // 当hash改变时，重新渲染指定的视图
    window.onhashchange = function(){
        render();
    }
    // 渲染
    function render(){
        switch( location.hash ){
            case "#/":
                // 将指定的页面视图结构，放入指定容器
                routerView.innerHTML = templateA;
                break;
            case "#/list":
                // 将指定的页面视图结构，放入指定容器
                routerView.innerHTML = templateB;
                break;
            case "#/cart":
                // 将指定的页面视图结构，放入指定容器
                routerView.innerHTML = templateC;
                break;
        }
    }
    
</script>
</html>